<template>
  <view class="list-container">
    <view class="card" v-for="(item, index) in dataList" :key="index">
      <!-- 顶部：状态标签 + 编号 + 更多 -->
      <view class="card-header">
        <view class="left">
          <up-tag
            v-if="item.state_name"
            :text="item.state_name"
            :type="
              ['审核通过', '完成'].includes(item.state_name)
                ? 'success'
                : item.state_name === '驳回'
                ? 'error'
                : 'warning'
            "
            style="margin-right: 20rpx"
            size="mini"
            class="tag"
          />
          <text class="order-id">{{ item.change_code }}</text>
        </view>
        <view class="right">
          <up-icon
            @click="handleMore(item)"
            name="more-dot-fill"
            size="20"
            color="#ccc"
          />
        </view>
      </view>

      <!-- 内容区域 -->
      <view class="card-row no-border-top">
        <text class="label">变更名称</text>
        &nbsp;
        <text>{{ item.change_name }}</text>
      </view>
      <view class="card-row">
        <view class="row-item">
          <text class="label">变更资产</text>
          <text class="value">{{ item.asset_name }}</text>
        </view>
        <view class="divider"></view>
        <view class="row-item">
          <text class="label">变更人</text>
          <text class="value">{{ item.change_user_name }}</text>
        </view>
      </view>
      <view class="card-row">
        <view class="row-item">
          <text class="label">变更日期</text>
          <text class="value">{{ item.change_date }}</text>
        </view>
        <view class="divider"></view>
        <view class="row-item">
          <text class="label">变更原因</text>
          <text class="value">{{ item.change_reason }}</text>
        </view>
      </view>
      <view class="card-row">
        <view class="row-item" style="width: 100%">
          <text class="label">备注</text>
          <text class="value">{{ item.remark }}</text>
        </view>
      </view>

      <!-- 审核记录链接 -->
      <view class="record-link"> 审核记录 </view>
    </view>

    <!-- 底部弹出 -->
    <up-popup
      :show="popupShow"
      mode="bottom"
      border-radius="20"
      @close="closePop"
      closeable
      :customStyle="{
        'margin-bottom': '120rpx',
      }"
    >
      <view class="popup-content">
        <!-- 操作按钮网格 -->
        <up-grid :border="false" col="2" gap="30rpx">
          <template v-for="item in actionList" :key="item.id">
            <up-grid-item
              v-if="
                item === '修改'
                  ? items.state_name === '待审核' || items.state_name === '驳回'
                  : item === '确定'
                  ? items.state_name === '审核通过'
                  : item === '反审'
                  ? items.state_name === '审核通过'
                  : item === '删除'
                  ? items.state_name === '待审核' || items.state_name === '驳回'
                  : item === '审核'
                  ? items.state_name === '待审核'
                  : true
              "
            >
              <up-button
                :plain="true"
                :text="item"
                size="large"
                @click="handleAction(item)"
                :customStyle="{
                  height: '100rpx',
                  fontSize: '36rpx',
                  borderRadius: '20rpx'
                }"
              />
            </up-grid-item>
          </template>
        </up-grid>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { defineProps, ref, defineEmits } from "vue";
import http from "@/api/request";
const emit = defineEmits(["updateData"]);
defineProps({
  dataList: {
    type: Array,
    default: () => [],
  },
});
const actionList = ["详情", "修改", "审核", "确定", "反审", "删除"];
const items = ref({});

const popupShow = ref(false);

const handleMore = (item) => {
  items.value = item;
  popupShow.value = !popupShow.value;
};

const closePop = () => {
  popupShow.value = !popupShow.value;
};

const handleAction = async (name) => {
  if (name === "详情") {
    uni.navigateTo({
      url: `/pages/assetChangeorder/info?name=detail&changeCode=${items.value.change_code}`,
    });
  }
  if (name === "修改") {
    uni.navigateTo({
      url: `/pages/assetChangeorder/info?name=edit&changeCode=${items.value.change_code}`,
    });
  }
  if (name === "审核") {
    uni.navigateTo({
      url: `/pages/assetChangeorder/info?name=examine&changeCode=${items.value.change_code}`,
    });
  }

  if (name === "删除") {
    uni.showLoading({
      title: "删除中...",
    });
    const data = {
      pageCode: "assetchange",
      params: {
        args: [
          {
            name: "interfaceCode",
            value: "assetchange.softDeleteAssetChangeOrder",
          },
          {
            name: "changeCode",
            value: items.value.change_code,
          },
        ],
      },
      methodName: "softDeleteAssetChangeOrder",
    };
    try {
      const { code, isSuccess } = await http.post("/api/module/Invoke", data);
      if (code && isSuccess) {
        uni.showToast({
          title: "删除成功",
          icon: "success",
        });
        emit("updateData");
      } else {
        uni.showToast({
          title: "删除失败",
          icon: "error",
        });
      }
    } catch {
      uni.showToast({
        title: "删除失败",
        icon: "error",
      });
    }
  }

  if (name === "确定" || name === "反审") {
    uni.showLoading({
      title: `${name}中...`,
    });
    const data = {
      pageCode: "assetchange",
      params: {
        args: [
          {
            name: "interfaceCode",
            value: "assetchange.auditAssetChangeOrder",
          },
          {
            name: "changeCode",
            value: items.value.change_code,
          },
          {
            name: "auditState",
            value: name === "确定" ? "COMPLETED" : "PENDING_REVIEW",
          },
        ],
      },
      methodName: "auditAssetChangeOrder",
    };
    try {
      const { code, isSuccess } = await http.post("/api/module/Invoke", data);

      if (code && isSuccess) {
        uni.showToast({
          title: `${name}成功`,
          icon: "success",
        });
        emit("updateData");
      } else {
        uni.showToast({
          title: `${name}失败`,
          icon: "error",
        });
      }
    } catch {
      uni.showToast({
        title: `${name}失败`,
        icon: "error",
      });
    }
  }
  uni.hideLoading();
  popupShow.value = !popupShow.value;
  uni.setStorageSync("assetInfoData", items.value);
};
</script>

<style scoped lang="scss">
.list-container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.card {
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 24rpx;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 24rpx 10rpx;

  .order-id {
    font-weight: bold;
    font-size: 24rpx;
    color: #333;
  }
  .right {
    display: flex;
    align-items: center;
    gap: 12rpx;
  }

  .tag {
    font-size: 20rpx;
  }
}

.card-row {
  display: flex;
  align-items: center;
  padding: 24rpx;
  border-top: 1px solid #f0f0f0;

  &.no-border-top {
    border-top: none;
  }

  .row-item {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 6rpx;
  }
  .divider {
    width: 1rpx;
    height: 40rpx;
    background-color: #e5e5e5;
    margin: 0 16rpx;
  }

  .label {
    color: #999;
    font-size: 24rpx;
  }

  .value {
    color: #333;
    font-weight: 500;
    font-size: 26rpx;
  }
}

.record-link {
  text-align: center;
  color: #4792fd;
  font-size: 26rpx;
  padding: 24rpx;
  border-top: 1px solid #f0f0f0;
}
.popup-content {
  padding: 40rpx;
  background-color: #fff;
  border-radius: 30rpx 30rpx 0 0;
}

.popup-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.status-tag {
  background-color: rgb(71, 146, 253);
  color: white;
  padding: 15rpx 25rpx;
  border-radius: 20rpx;
  font-size: 32rpx;
  margin-right: 30rpx;
  font-weight: bold;
}

.asset-code {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.asset-label {
  color: #666;
  font-size: 34rpx;
  margin-bottom: 40rpx;
  line-height: 1.6;
  padding: 10rpx 0;
}
</style>
